<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>6成绩查询-个人成绩记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{/*position: relative; */ height: 50px; top:0; background:#fff; }
.g-back{ position: absolute;left: 0;top:0; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{position: absolute;right: 0;top:0; width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*选择项*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;     overflow-y: auto; }

.head-wrap{height:172px; width: 100%; background: #fff; }
.head-wrap-bg{height: 122px; width: 100%;border:1px solid #fff; background:#4e95f1; border-radius:0 0 186px 186px/0 0 40px 40px;}
.head-wrap-cont{ width: 280px; height: 122px; margin:55px auto;border-radius: 5px; background:url(../img/ku_03.png) center -5px no-repeat; 
  background-size: 300px 122px;}
.head-wrap-cont img{ width: 70px; height: 70px;margin:-35px 0 0 105px; border-radius: 50%;background: pink;}
.head-wrap-cont h4{padding:0;width:100%; line-height: 32px; text-align: center; font-size: 18px; }
.head-wrap-cont p{padding:0;width:100%; line-height: 20px; text-align: center; font-size: 15px; color:#888;}
/*成绩信息内容*/
.genrenchengji,.cj-header{ background:#fff; overflow: hidden; font-size: 12px; }
.cj-header{ border-top: 1px solid #eee; }
.genrenchengji span,
.cj-header span{ float:left; width: 20%; height: 40px; line-height: 40px; text-align: center; border-bottom: 1px solid #ecedf0; border-right: 1px solid #ecedf0; }
.genrenchengji span{ color: #666; }
.genrenchengji a{display: inline-block; width:100%;text-align: center; padding:0 5px; line-height: 12px;  vertical-align: middle; color: #666; word-wrap:break-word; }
.cj-info{ overflow: hidden; display: none; }
.cj-info li{  float: left; width: 20%;  }
.cj-info li a{  color: inherit; }
.cj-info li span{  display: block; width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 12px;  border-bottom: 1px solid #ecedf0; border-right: 1px solid #ecedf0; }
.cj-info .dk-fen{ color: #666; }
/*箭头图标*/
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{ background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
.color1{ color: #666 !important; }
.color2{ color: #2e95fc !important; }
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
            <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>
                      <span class="t-title">班级总成绩排名</span>  
                      <a  class="g-other"></a>
            </div>
             <!-- 内容区 -->
            <div class="weui-tab__bd page-wrap" >

                    <div class="head-wrap">
                       <div class="head-wrap-bg">
                           <div class="head-wrap-cont">
                               <img src="../img/t5.png">
                               <h4>范萌萌</h4>
                               <p>小学部-四年级-二班</p>
                           </div>
                       </div>
                    </div>
                    <!-- 成绩信息 -->
                    <div class="chengjiWrap">
                            <div class="cj-header">
                                  <span>考试名</span>
                                  <span>年级排名</span>
                                  <span>班级排名</span>
                                  <span>总成绩</span>
                                  <span>详情</span>
                            </div>
                            <ul id="cj-lists">
                                     <li>
                                          <div class="genrenchengji">
                                                <span><a href="###" class="name">范大境范大境范大</a></span>
                                                <span class="njipaiming">1</span>
                                                <span class="banjipaiming">3</span>
                                                <span class="zongchengji">620</span>
                                                <span class="geng-btn color2">更多</span>                                 
                                          </div>
                                          <ul class="cj-info">
                                                <li><a href="cheng2.html"></a><span class="dk-title">语文</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="cheng2.html"></a><span class="dk-title">数学</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="cheng2.html"></a><span class="dk-title">英语</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="cheng2.html"></a><span class="dk-title">物理</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="cheng2.html"></a><span class="dk-title">化学</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="cheng2.html"></a><span class="dk-title">生物</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="cheng2.html"></a><span class="dk-title">语文</span></a><span class="dk-fen">89</span></li>
                                          </ul>
                                      </li>
                            </ul>
                    </div>
        </div>
</div>
</body>
<script>
(function(){
// 成绩查询列表数据渲染
      var arr = [
            { name:"2018年1月月考考试", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"2018年2月月考考试", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"2018年3月月考考试", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ],
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"2018年4月月考考试", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"2018年5月月考考试", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"2018年6月月考考试", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
      ];
      var strarr = [];
      $.each(arr, function(i,v){
            var str='';
            $.each(v.k, function(i2,v2){
                  str += '<li><a href="'+v.href2+'"><span class="dk-title">'+v2[0]+'</span></a>'+
                          '<span class="dk-fen">'+v2[1]+'</span></li> ';
            })
            strarr.push(
                   '<li>'+
                        '<div class="genrenchengji">'+
                              '<span><a href="'+v.href1+'" class="name">'+v.name+'</a></span>'+
                              '<span class="njipaiming">'+v.n+'</span>'+
                             '<span class="banjipaiming">'+v.b+'</span>'+
                              '<span class="zongchengji">'+v.f+'</span>'+
                              '<span class="geng-btn color2">更多</span>'+                                 
                        '</div>'+
                        '<ul class="cj-info">'+str+'</ul>'+
                    '</li>'
           )
      })
      $("#cj-lists").html( strarr.join(""));

// 收起展开按钮
$(".geng-btn").click(function(){
     if( $(this).text() == "更多"){
           $(this).text( "收起" );
           $(this).parent().next("ul").slideDown();
     }else{
            $(this).text( "更多" );
           $(this).parent().next("ul").slideUp();
     }
})

 })()

</script>
</html>